<template>
	<view class="goods-details">
		<!-- 顶部导航 -->
		<u-navbar id="navbar" :border-bottom="false"
			:background="{ background: 'rgba(256,256,256, '+ navStyle.backgroundBg +')', }"
			:back-bg="'rgba(0,0,0,' + navStyle.backBg + ')'" :back-icon-color="navStyle.backColor" :immersive="true">

			<tabs sticky-bg-color="transparent" v-if="navStyle.backgroundBg > 0.1" :show-bar="true" :bar-width="60"
				:is-scroll="false" :current="active" bg-color="transparent"
				:style="{width: '100%', opacity: navStyle.backgroundBg}" @change="changeActive"
				:config="{activeColor: '#24A3FF', underLineColor: '#24A3FF'}">
				<tab title="商品"></tab>
				<tab title="评价"></tab>
				<tab title="详情"></tab>
			</tabs>
		</u-navbar>

		<loading-view v-if="isFirstLoading"></loading-view>

		<view class="contain" v-if="!isNull" id="goods">
			<bubble-tips :top="90 + navHeight + 'rpx'"></bubble-tips>
			<product-swiper :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper>

			<!-- 商品基础信息 -->
			<view class="card goods-info">
				<view class="goods-price">
					<price-format color="#FF2C3C" :first-size="46" :second-size="32" :subscript-size="32"
						:price="goodsDetail.price" :weight="500" />
					<text class="xs">/天起</text>
				</view>
				<view class="goods-name">
					<text class="goods-tag">{{ goodsDetail.equipment_desc }}</text>
					{{ goodsDetail.name }}
				</view>
				<view class="goods-short" v-if="goodsDetail.name_short!=''">
					{{ goodsDetail.name_short }}
				</view>
				<view class="goods-other">
					<view class="row">
						<image src="@/bundle/static/images/zhimay.png" mode="aspectFit" class="zhima-my"
							v-if="goodsDetail.is_zhima"></image>
						<text>商品押金 ￥{{ goodsDetail.deposit }}</text>
					</view>
					<text>{{ goodsDetail.period_desc }}</text>
				</view>
			</view>


			<!-- 规格信息 -->
			<view class="card goods-items">
				<view class="item">
					<view class="item-title">选择</view>
					<view class="item-desc" @click="showSpecFun()">
						<text class="lighter line1">已选:{{checkedGoods.goods_item.spec_value_str}}</text>
						<image class="icon-sm" src="/static/images/arrow_right.png" />
					</view>
				</view>
				<view class="item mt30" v-if="goodsDetail.goods_accessory.length!==0">
					<view class="item-title">配件</view>
					<view class="item-accessory">
						<view class="list" v-for="item in goodsDetail.goods_accessory" :key="item.id"
							@click="showAccessoryFun()">
							<text class="tag">{{item.name}}</text>
							<text class="lighter line1">{{item.accessory_item_str}}</text>
							<image class="icon-sm" src="/static/images/arrow_right.png" />
						</view>
					</view>
				</view>
			</view>

			<!-- 评价 -->
			<!-- 	<view class="card goods-comment" id="comment">
				<view class="title">
					<view class="title-left">
						商品评价({{goodsDetail.comment_count}})
					</view>
					<navigator hover-class="none" :url="'/bundle/pages/lease_goods_comments/lease_goods_comments?id=' + goodsDetail.id">
						<view class="row title-right">
							<text>全部</text>
							<image class="icon-sm" src="/static/images/arrow_right.png" />
						</view>
					</navigator>
				</view>
				<view class="list" v-for="(item, index) in goodsDetail.goods_comment" :key="index">
					<view class="row-between">
						<view class="flex1 row">
							<view class="mr20">
								<custom-image width="64rpx" height="64rpx" radius="64rpx" lazy-load :src="item.user.avatar" />
							</view>
							
							<view class="flex1">
								<view class="line1 list-name">{{item.user.nickname}}</view>
								<view class="line1 list-date">{{item.create_time}}</view>
							</view>
						</view>
						<view>
							<u-rate :disabled="true" v-model="item.goods_comment" active-color="#F4B848" :size="24" />
						</view>
					</view>
					<view class="list-content">{{item.comment}}</view>
					<view class="list-image">
						<view class="mr20 mb20" v-for="(item2, index2) in item.comment_image" :key="index2" :data-current="index2" :data-uri="item2.uri" @tap="previewImage">
							<custom-image width="130rpx" height="130rpx" radius="6rpx" :src="item2.uri" />
						</view>
					</view>
				</view>
			</view> -->

			<!-- 详情信息 || 租赁说明 -->
			<view class="card details" id="details">
				<view class="title">
					<u-tabs :list="tabsList" :is-scroll="false" :current="currentTab" :bold="true" font-size="30rpx"
						active-color="#24A3FF" inactive-color="#333333" bar-width="120" bar-height="6"
						@change="changeTab" />
				</view>
				<!-- 详情内容 -->
				<view class="content">
					<template v-if="currentTab === 0">
						<u-parse :html="goodsDetail.content" :lazy-load="true" :show-with-animation="true" />
					</template>
					<template v-else-if="currentTab === 1">
						<u-parse :html="goodsDetail.lease_explain" :lazy-load="true" :show-with-animation="true" />
					</template>
				</view>
			</view>

			<!-- Widget -->
			<view class="footer row bg-white fixed">
				<navigator class="btn column-center" hover-class="none" open-type="switchTab" url="/pages/index/index">
					<image class="icon-md" src="/static/images/icon_index.png" />
					<text class="xxs lighter">首页</text>
				</navigator>
				<navigator class="btn column-center" hover-class="none"
					url="/bundle/pages/contact_offical/contact_offical">
					<image class="icon-md" src="/static/images/icon_contact.png" />
					<text class="xxs lighter">客服</text>
				</navigator>
				<view class="btn column-center" @tap="collectGoodsFun">
					<image class="icon-md"
						:src="goodsDetail.is_collect == 1 ? '/static/images/icon_collection_s.png' : '/static/images/icon_collection.png'" />
					<text class="xxs lighter">收藏</text>
				</view>
				<view class="right-buy br60 white mr20 ml10 md" @tap="showSpecFun">{{goodsDetail.is_zhima?'去免押':'立即下单'}}
				</view>
			</view>
		</view>
		<!-- 找不到商品 -->
		<view v-else>
			<view class="details-null column-center">
				<image class="img-null" src="/static/images/goods_null.png" />
				<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
			</view>
			<recommend />
		</view>


		<!-- 商品规格选择Popup -->
		<lease-spec-popup :show="showSpec" :goods="goodsDetail" :buttonTxt="goodsDetail.is_zhima?'去免押':'立即下单'"
			@close="showSpec = false" @confirm="onConfirm" @change="onChangeGoods" />
		<!-- 配件Popup -->
		<lease-accessory-popup :show="showAccessory" :accessory="goodsDetail.goods_accessory"
			@close="showAccessory = false" @confirm="showAccessory = false" />

		<!-- <share-popup
			:show="showShareBtn"
			@close="showShareBtn = false" 
			:share-id="id" 
			pagePath="bundle/pages/lease_goods_details/lease_goods_details" 
			:type="2" 
			:config="{
				avatar: userInfo.avatar,
				nickname: userInfo.nickname,
				image: goodsDetail.image,
				price: price,
				name: goodsDetail.name
		}">
		</share-popup> -->

	</view>
</template>

<script>
	import {
		getLeaseGoodsDetail,
		getGoodsCoupon,
		getGoodsComment,
		leaseBuy,
		leaseCollectGoods
	} from '@/api/lease.js'

	import {
		getPoster
	} from '@/api/store';
	import {
		mapGetters
	} from 'vuex';
	import {
		toLogin
	} from '@/utils/login';
	import {
		strToParams,
		getRect
	} from '@/utils/tools'
	const app = getApp()
	export default {
		data() {
			return {
				isFirstLoading: true, // 是否第一次加载
				isNull: false, // 是否找到该商品
				showSpec: false, // 规格选择Popup
				showAccessory: false, // 配件Popup
				showShareBtn: false, // 分享Popup
				swiperList: [], // 轮播图列表
				goodsDetail: {
					goods_accessory: []
				}, // 商品信息数据
				goodsLike: [], // 猜你喜欢列表数据
				goodsType: 0, // 商品类型
				comment: {}, // 留言数据
				id: '', // 当前商品ID
				currentTab: 0, // Tabs当前位置                
				commentPercent: '', // 好评率
				// Tabs 列表
				tabsList: [{
					kay: 'goods',
					name: '商品详情'
				}, {
					key: 'lease',
					name: '租赁说明'
				}],

				navStyle: {
					backBg: 0.4,
					backgroundBg: 0,
					backColor: 'rgba(256,256,256,1)'
				},
				active: 0,
				topArr: [],
				checkedGoods: {
					goods_item:[]
				}, //选中的商品规格信息
			};
		},

		onPageScroll(e) {
			const top = uni.upx2px(500)
			const {
				scrollTop
			} = e
			const percent = scrollTop / top
			this.navStyle.backgroundBg = percent
			this.navStyle.backBg = 0.4 * (0.5 - percent)
			this.navStyle.backColor = percent < 0.5 ? 'rgba(256,256,256,' + (0.5 - percent) * 2 + ')' : 'rgba(0,0,0,' +
				(
					percent - 0.5) * 2 + ')'
			if (!this.isTouchStart) return
			const topList = this.topArr.map((item, index) => ({
					index,
					top: item
				}))
				.filter(item => item.top <= scrollTop)

			if (topList.length) {
				const index = topList.sort((a, b) => b.top - a.top)[0].index
				if (this.active == index) return
				this.active = index
			}
		},

		computed: {
			...mapGetters(['userInfo']),

			navHeight() {
				return app.globalData.navHeight
			},
		},

		methods: {
			changeActive(index) {
				this.isTouchStart = false

				uni.pageScrollTo({
					scrollTop: this.topArr[index],
					duration: 200
				});
			},

			getRectInfo() {
				if (this.topArr.length) return
				getRect('#goods').then((res) => {
					this.topArr[0] = res.top - this.navHeight
				})
				getRect('#comment').then((res) => {
					this.topArr[1] = res.top - this.navHeight
				})
				getRect('#details').then((res) => {
					this.topArr[2] = res.top - this.navHeight
				})
			},


			// 改变当前的Tabs位置
			changeTab(index) {
				this.currentTab = index;
			},

			// 获取商品信息
			getGoodsDetailFun() {
				getLeaseGoodsDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						const data = res.data;

						this.goodsDetail = data;
						this.swiperList = data.goods_image;
						this.comment = data.comment;
						this.goodsLike = data.like;

						this.$nextTick(() => {

							this.isFirstLoading = false

							// 滚动到顶部，防止h5端出现问题
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 0,
							});
							this.getRectInfo()
						});
					} else {
						this.isNull = true
						this.isFirstLoading = false;
					}
				});
			},

			// 收藏商品
			collectGoodsFun() {
				if (!this.isLogin) return toLogin();

				const is_collect = this.goodsDetail.is_collect;

				leaseCollectGoods({
					status: is_collect == 0 ? 1 : 0,
					id: this.id
				}).then(res => {
					if (res.code != 1) return;

					is_collect == 0 ?
						this.$toast({
							title: '收藏成功'
						}) :
						this.$toast({
							title: '取消收藏'
						});

					this.getGoodsDetailFun();
				});
			},

			// 展示规格
			showSpecFun() {
				if (!this.isLogin) return toLogin();
				this.showSpec = true;
			},

			// 展示配件
			showAccessoryFun() {
				this.showAccessory = true;
			},

			// 立即租赁
			onConfirm(field) {
				uni.navigateTo({
					url: '/bundle/pages/lease_confirm_order/lease_confirm_order?data=' +
						encodeURIComponent((JSON.stringify(field)))
				})
			},

			//选择商品规格
			onChangeGoods(e) {
				this.checkedGoods = e.detail
			},
			//预览图片
			previewImage(e) {
				const {
					current,
					uri
				} = e.currentTarget.dataset;
				let urls = [uri];
				uni.previewImage({
					current,
					// 当前显示图片的http链接
					urls // 需要预览的图片http链接列表

				});
			}
		},

		onLoad(options) {
			if (options && options.scene) {
				let scene = strToParams(decodeURIComponent(options.scene));
				console.log(scene, decodeURIComponent(options.scene))
				options.id = scene.id;
			}

			if (!options.id)
				return this.$toast({
					title: '缺少参数，无法查看商品'
				}, {
					tab: 3
				});

			const goods_id = options.id || 4;
			this.id = goods_id;

			getGoodsComment({
				lease_goods_id: goods_id
			}).then(({
				code,
				data
			}) => {
				if (code != 1) return;
				this.commentPercent = data.percent;
			});
		},

		onShow() {
			this.getGoodsDetailFun();
		},

		// 分享
		onShareAppMessage() {
			const goodsDetail = this.goodsDetail;
			const userInfo = this.userInfo;

			return {
				title: goodsDetail.name,
				imageUrl: goodsDetail.image,
				path: '/bundle/pages/lease_goods_details/lease_goods_details?id=' +
					this.id +
					"&invite_code=" +
					userInfo.distribution_code
			};
		}
	};
</script>

<style lang="scss" scoped>
	.goods-details {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.card {
			border-radius: 24rpx;
			padding: 30rpx 24rpx;
			background-color: #fff;
			margin: 24rpx 24rpx 0;
		}

		.goods-info {
			.goods-price {
				color: #FF2C3C;
				margin-bottom: 10rpx;
			}

			.goods-name {
				font-size: 40rpx;
				line-height: 56rpx;
				font-weight: bold;
				white-space: pre-wrap;
				word-break: break-all;

				.goods-tag {
					font-size: 22rpx;
					border-radius: 6rpx;
					padding: 4rpx 4rpx;
					background: rgba(251, 234, 210, 1);
					color: rgba(186, 145, 93, 1);
					margin-right: 10rpx;
					vertical-align: top;
				}
			}

			.goods-short {
				font-size: 24rpx;
				color: #00000099;
				// margin: 15rpx 0 30rpx;
				margin-top: 15rpx;
			}

			.goods-other {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #00000066;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view {
					display: flex;
				
				}

			}
		}

		.goods-items {
			.item {
				display: flex;
				justify-content: space-between;

				.item-title {
					font-size: 28rpx;
					color: #00000066;
				}

				.item-desc {
					display: flex;
					align-items: center;
					width: 85%;
					line-height: 28rpx;

					.lighter {
						font-size: 28rpx;
						color: #00000099;
						flex: 1;
					}
				}

				.item-accessory {
					width: 85%;

					.list {
						display: flex;
						align-items: center;
						line-height: 28rpx;
						margin-bottom: 20rpx;

						.lighter {
							font-size: 28rpx;
							color: #00000099;
							flex: 1;
						}

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 2rpx 6rpx;
							border: 1rpx solid #2482EE;
							color: #2482EE;
							vertical-align: top;
							margin-right: 14rpx;
						}
					}
				}
			}
		}

		.goods-comment {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #00000005;
				margin-bottom: 10rpx;

				.title-left {
					font-size: 32rpx;
					color: #000000E5;
				}

				.title-right {
					font-size: 28rpx;
					color: #00000066;
				}
			}

			.list {
				margin-top: 20rpx;
				margin-bottom: 10rpx;

				.list-name {
					width: 300rpx;
					font-size: 28rpx;
					color: #000000E5;
				}

				.list-date {
					font-size: 28rpx;
					color: #00000066;
				}

				.list-content {
					font-size: 28rpx;
					color: #000000E5;
					padding: 20rpx 0;
				}

				.list-image {
					display: flex;
					flex-wrap: wrap;
				}
			}
		}


		.details-null {
			padding-top: 140rpx;
			margin-bottom: 100rpx;
		}

		.spec {
			// padding: 24rpx 24rpx;
			padding: 10rpx 24rpx;

			.text {
				width: 100rpx;
			}
		}



		.details {
			.title {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #00000005;
				margin-bottom: 30rpx;
			}

			&>.content {
				overflow: hidden;

				::v-deep image {
					vertical-align: middle;
				}

				// #ifdef H5
				::v-deep img {
					vertical-align: middle;
				}

				// #endif
				// #ifdef MP-WEIXIN || APP-PLUS
				::v-deep ._img {
					display: block;
				}

				// #endif
			}
		}

		.footer {
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);

			.btn {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				line-height: 1.3;
			}

			.cart-num {
				position: absolute;
				left: 60rpx;
				top: 6rpx;
			}

			.add-cart,
			.right-buy {
				flex: 1;
				text-align: center;
				padding: 16rpx 0;
			}

			.add-cart {
				background-color: rgba(36, 163, 255, 0.1);
			}

			.right-buy {
				background-color: $-color-primary;
			}
		}

		.group-play {
			.title {
				padding: 20rpx 28rpx;
				border-bottom: $-solid-border;
			}

			.steps {
				padding: 20rpx 28rpx;

				.step {
					flex: none;
				}

				.line {
					flex: 1;
					border: 1px dashed #999999;
					margin: 0 20rpx;
				}

				.number {
					border: 1rpx solid #707070;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					line-height: 28rpx;
					text-align: center;
					margin-right: 6rpx;
				}
			}
		}

		.group-list {
			.group-item {
				padding: 20rpx 24rpx;

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.group-btn {
					background: linear-gradient(90deg, #f95f2f 0%, #ff2c3c 100%);
					height: 58rpx;
					padding-left: 28rpx;
					padding-right: 28rpx;
					margin-left: 30rpx;
					box-shadow: 0px 6rpx 12rpx rgba(249, 47, 138, 0.4);
				}
			}
		}
	}

	/* #ifdef MP-ALIPAY */
	::v-deep .u-navbar .u-back-wrap .u-icon-wrap {
		background-color: #ffffff !important;
	}

	::v-deep .u-navbar .u-back-wrap .u-icon-wrap .uicon-nav-back.u-iconfont {
		color: #000000 !important;
	}

	::v-deep .u-navbar .u-navbar-inner .u-slot-right {
		width: 200rpx;
	}

	/* #endif */

	.zhima-my {
		width: 110rpx;
		height: 40rpx;
		margin-right: 10rpx;

	}
</style>